
<div id='calendar'></div>


#{ifErrors}
<div class="error">
   <h1>Oops...</h1>
   #{errors}
       <li>${error}</li>
   #{/errors}
</div>
#{/ifErrors}


<table id="myreqtab"  border=0 cellspacing=0 cellpadding=0>
<tr>
  <th width="15%" class="ui-state-default">&{'table.type'}</th>
  <th width="15%" class="ui-state-default">&{'table.start'}</th>
  <th width="15%" class="ui-state-default">&{'table.end'}</th>
  <th width="20%" class="ui-state-default">&{'table.observation'}</th>
  <th width="20%" class="ui-state-default">&{'table.response'}</th>
  <th width="10%" class="ui-state-default">&{'table.state'}</th>
  <th width="5%" class="ui-state-default">&{'table.action'}</th>
</tr>

#{list items:requests, as:'req'}

<tr class="${req_parity}" id="req-${req.id}">
  <td>${types.get(new Long(req.getTypeId()-1L).intValue()).getDescription()}</td>
  <td>${req.getFrom().format('dd/MM/yyyy')}</td>
  <td>${req.getTo().format('dd/MM/yyyy')}</td>
  <td>${req.getAskComment()}</td>
  <td>${req.getAnswerComment()}</td>
  <td>&{'request.status.'+req.getStatus()}</td>
  <td>
  #{if req.getStatus().toString() == 'PENDING'}
	<a href="#" id="editreq-${req.id}" class="ui-icon ui-icon-pencil editreq left"  />
  	<a href="#" id="removereq-${req.id}" class="ui-icon ui-icon-trash removereq"/>
  </td>
  <tr id="edit-${req.id}" style="display:none;">
  <td>
  <select id="reqtype-${req.id}"> 
  #{list items:types, as:'typ'}
    <option value="${typ.id}" #{if req.getTypeId() == typ.id} selected="selected"  #{/if}>
    ${typ.description}</option> 
  #{/list}
  </select>
  </td>
  <td><input type="text" class="datepicker" id="start-${req.id}" value="${req.getFrom().format('dd/MM/yyyy')}"></td>
  <td><input type="text" class="datepicker" id="end-${req.id}" value="${req.getTo().format('dd/MM/yyyy')}"></td>
  <td><input id="obs-${req.id}" type="text" value="${req.getAskComment()}" style="width:100%"/></td>
  <td>${req.getAnswerComment()}</td>
  <td>&{'request.status.'+req.getStatus()}</td>
  <td>
  	<a href="#" id="submit-${req.id}" class="ui-icon ui-icon-check left submit"/>
  	<a href="#" id="close-${req.id}" class="ui-icon ui-icon-closethick close"/>
  </td> 
  </tr>
  #{/if}
  #{else}
  </td>
  #{/else}
</tr>
#{/list}
</table>


<script type="text/javascript">
var myEvents = [];
#{list items:requests, as:'req'}

var startDate = new Date(${req.getFrom().format('yyyy')},${Integer.parseInt(req.getFrom().format('MM'))-1},${req.getFrom().format('dd')});
var endDate = new Date(${req.getTo().format('yyyy')},${Integer.parseInt(req.getTo().format('MM'))-1},${req.getTo().format('dd')});
var titre = '${types.get(new Long(req.getTypeId()-1L).intValue()).getDescription().toString().raw()}';
myEvents[${req_index-1}] = {
	    title: titre,
	    start: startDate, 
	    end: endDate
	  };
#{/list}

$(document).ready(function() {

		$('#calendar').fullCalendar({
			header: {
				right:'today,prevYear,prev,next,nextYear'
			},
			defaultView:'basicWeek',
			editable: false,
			height: 80,
			events: myEvents
		});	
		
		$(".editreq").click(function(){
			var idReq = $(this).attr("id").split("-")[1];
			$("#req-"+idReq).hide();
			$("#edit-"+idReq).show();
			return false;		
		});
		
		$(".close").click(function(){
			var idReq = $(this).attr("id").split("-")[1];
			$("#req-"+idReq).show();
			$("#edit-"+idReq).hide();
			return false;		
		});
		
		var removeAction = #{jsAction @MyRequests.remove(':id') /}
		
		$(".removereq").click(function(){
			//TODO replace with i18n i18n('request.confirm.trash')
			if(confirm("???")){
				var idReq = $(this).attr("id").split("-")[1];
				$.post(removeAction({
					id: idReq
				}),null,function(data){
					$("#ui-tabs-1").html(data);
				});
			
			}
			return false;
		});
		
		var updateAction = #{jsAction @MyRequests.update(':id',':observations',':requesttype',':start',':end') /}
		
		$(".submit").click(function(){
			var idReq = $(this).attr("id").split("-")[1];
			var type= "";
		
			
			$("#reqtype-"+idReq+" > option").each(function(){
				if($(this).attr("selected") == "selected"){
					type = $(this).val();	
					return;
				}
			});

			$.post(updateAction({
				id: idReq,
				observations: $("#obs-"+idReq).val(), 
				requesttype: type,
				start: $("#start-"+idReq).val(),
				end : $("#end-"+idReq).val()
			}),null,function(data){
				$("#ui-tabs-1").html(data);
			});
			return false;
		});
		
		$("input.datepicker").datepicker({dateFormat:"dd/mm/yy"});
		
	});

</script>